<template>
  <div class="zm">
<!-- 输入手机号，调起手机号键盘 -->
<van-field v-model="tel" type="tel" label="手机号:" placeholder="请输入手机号"/>
<!-- 输入密码 -->
<van-field v-model="password" type="password" label="密码:" placeholder="首次登录后，密码为手机后六位"/>

<van-button type="primary" block @click="login()">登录</van-button>
  </div>
</template>

<script>
import {postdatalink} from "@/api/postapi.js"
export default {
data() {
    return {
      tel: '',
      password: '',
    };
  },
methods:{
  login(){
    let usp=new URLSearchParams()
    usp.append("username",this.tel);
    usp.append("password",this.password);
       postdatalink("/api/password_login/",usp).then((ok)=>{
         console.log(ok)
          if(ok.data.msg == "登录成功"){
              alert("登录成功")
            localStorage.setItem("token",JSON.stringify(ok))
            this.$router.push("/myhome");
          }else{
              alert("登录失败请重新登录")
          }
       }) 
  }
}
}
</script>

<style scoped>
.zm{
  width: 3.4rem;
  height: 5rem;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
margin: auto;

}
.zm>p{
  display: flex;
  justify-content: space-evenly;
  margin-top: .1rem;
}
.zm>.van-field{
  border: 1px solid gray;
  margin: .5rem auto; 
}
</style>